<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <div class="detail-column">
        <div class="column-title">反馈基础信息</div>
        <div class="column-content">
          <a-descriptions bordered :labelStyle="{ width: '120px' }" :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
            <a-descriptions-item label="反馈ID">
              {{ feedbackData.feedback_id || '-' }}
              <img class="icon" src="/public/icons/common/icon-copy.png" alt=""
                @click="handleCopy(feedbackData.feedback_id)" v-if="feedbackData.feedback_id" />
            </a-descriptions-item>
            <a-descriptions-item label="问题分类">{{ feedbackData.category_name || '-' }}</a-descriptions-item>
            <a-descriptions-item label="处理状态">
              <div class="cell-status-box" :class="{ 'is-active': feedbackData.feedback_status_id === 1 }">
                <div class="status-dot"></div>
                <div class="status-text">
                  {{ feedbackData.status_name || '-' }}
                </div>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="是否启用">{{ feedbackData.enabled ? '是' : '否' }}</a-descriptions-item>
            <a-descriptions-item label="创建时间">{{ formatDate(feedbackData.created) }}</a-descriptions-item>
            <a-descriptions-item label="更新时间">{{ formatDate(feedbackData.updated) }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">发起人信息</div>
        <div class="column-content">
          <a-descriptions bordered :labelStyle="{ width: '120px' }" :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
            <a-descriptions-item label="发起人姓名">{{ feedbackData.user_name || '-' }}</a-descriptions-item>
            <a-descriptions-item label="用户ID">{{ feedbackData.user_id || '-' }}</a-descriptions-item>
            <a-descriptions-item label="手机号">
              {{ seePhone ? feedbackData.tel : maskPhone(feedbackData.tel) }}
              <img class="icon" v-if="!seePhone" src="/public/icons/common/icon-see-close.png" alt=""
                @click="handleChangeSee(1)" />
              <img v-else class="icon" src="/public/icons/common/icon-see-open.png" alt=""
                @click="handleChangeSee(1)" />
            </a-descriptions-item>
            <a-descriptions-item label="电子邮箱">{{ feedbackData.email || '-' }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">问题描述</div>
        <div class="column-content">
          <a-descriptions bordered :column="1" :labelStyle="{ width: '120px' }">
            <a-descriptions-item label="详细描述">
              <div class="description-text">
                {{ feedbackData.description || '暂无描述' }}
              </div>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">问题反馈回复</div>
        <div class="column-content">
          <a-form :model="replyForm" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
            <a-form-item label="回复标题" name="title">
              <a-input v-model:value="replyForm.title" placeholder="请输入回复标题" />
            </a-form-item>
            <a-form-item label="处理状态" name="feedback_status_id">
              <a-select v-model:value="replyForm.feedback_status_id" placeholder="请选择处理状态">
                <a-select-option v-for="option in statusOptions" :key="option.value" :value="option.value">
                  {{ option.text }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="回复内容" name="description">
              <a-textarea v-model:value="replyForm.description" placeholder="请输入回复内容" :rows="6" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 3, span: 21 }">
              <a-button type="primary" @click="handleSubmitReply" :loading="submitting">提交回复</a-button>
              <a-button style="margin-left: 8px" @click="handleResetReply">重置</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import Feedback from '@/api/Feedback.ts'
import { message } from 'ant-design-vue';
import { maskPhone } from '@/utils/validate.ts'
import apiClient from '@/api'


const route = useRoute();
const feedbackData = ref({});

// 回复表单数据
const replyForm = ref({
  title: '',
  feedback_status_id: undefined,
  description: ''
});

// 提交状态
const submitting = ref(false);

// 状态选项数据
const statusOptions = ref([]);

const handleCopy = (text) => {
  if (text) {
    navigator.clipboard.writeText(text).then(() => {
      // 使用 antd 的 message 组件显示复制成功提示
      message.success('复制成功');
    }).catch(err => {
      console.error('复制失败:', err);
      message.error('复制失败');
    });
  }
};

const seePhone = ref(false);

const handleChangeSee = (type) => {
  if (type === 1) {
    console.log("手机号");
    seePhone.value = !seePhone.value;
  }
};

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '-';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

// 提交回复
const handleSubmitReply = async () => {
  if (!replyForm.value.title || !replyForm.value.description) {
    message.warning('请填写回复标题和内容');
    return;
  }

  submitting.value = true;
  try {
    const params = {
      feedback_id: feedbackData.value.feedback_id,
      feedback_status_id: replyForm.value.feedback_status_id,
      title: replyForm.value.title,
      description: replyForm.value.description
    };

    const response = await apiClient.apiFeedbackCreateFeedbackAnswerPost(params);
    console.log('回复提交响应:', response);

    if (response) {

      message.success('回复提交成功');
      handleResetReply();
    } else {
      message.error(response.message || '回复提交失败');
    }
  } catch (error) {
    console.error('提交回复失败:', error);
    message.error('回复提交失败，请稍后重试');
  } finally {
    submitting.value = false;
  }
};

// 重置回复表单
const handleResetReply = () => {
  replyForm.value = {
    title: '',
    feedback_status_id: undefined,
    description: ''
  };
};



// 获取状态选项
const fetchStatusOptions = async () => {
  try {
    const response = await apiClient.apiFeedbackStatusOptionsPost({});
    if (response.data) {
      statusOptions.value = response.data || [];
    } else {
      console.error('获取状态选项失败:', response.message);
    }
  } catch (error) {
    console.error('获取状态选项失败:', error);
  }
};

onMounted(async () => {
  // 获取状态选项
  await fetchStatusOptions();

  // 从路由参数中获取反馈数据
  if (route.query.feedbackData) {
    try {
      feedbackData.value = JSON.parse(route.query.feedbackData);
      console.log('获取到的反馈数据:', feedbackData.value);
    } catch (error) {
      console.error('解析反馈数据失败:', error);
    }
  } else if (route.params.feedbackId) {
    // 如果没有数据但有ID，尝试重新获取
    try {
      const res = await Feedback.FetchModel({ feedback_id: route.params.feedbackId });
      feedbackData.value = res.data || res;
      console.log('重新获取的反馈数据:', feedbackData.value);
    } catch (error) {
      console.error('获取反馈数据失败:', error);
    }
  }
});
</script>

<style lang="less" scoped>
.detail-wrapper {
  height: 100%;
  padding: 16px;
  background: #f5f5f5;

  .detail-main {
    background: #ffffff;
    border-radius: 8px;
    padding: 24px;

    .detail-column {
      margin-bottom: 32px;

      &:last-child {
        margin-bottom: 0;
      }

      .column-title {
        font-size: 16px;
        font-weight: 600;
        color: #262626;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 2px solid #1890ff;
      }

      .column-content {
        .icon {
          width: 16px;
          height: 16px;
          margin-left: 8px;
          cursor: pointer;
          vertical-align: middle;
        }

        .cell-status-box {
          display: flex;
          align-items: center;

          .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ff4d4f;
            margin-right: 8px;
          }

          .status-text {
            color: #ff4d4f;
            font-weight: 500;
          }

          &.is-active {
            .status-dot {
              background-color: #52c41a;
            }

            .status-text {
              color: #52c41a;
            }
          }
        }

        .description-text {
          line-height: 1.6;
          color: #595959;
          white-space: pre-wrap;
          word-break: break-word;
          max-height: 200px;
          overflow-y: auto;
          padding: 8px;
          background: #fafafa;
          border-radius: 4px;
          border: 1px solid #f0f0f0;
        }

        // 回复表单样式
        .ant-form {
          .ant-form-item {
            margin-bottom: 16px;

            .ant-form-item-label {
              font-weight: 500;
              color: #262626;
            }

            .ant-input,
            .ant-select,
            .ant-input-affix-wrapper {
              border-radius: 6px;

              &:focus,
              &:hover {
                border-color: #1890ff;
              }
            }

            .ant-btn {
              border-radius: 6px;
              font-weight: 500;

              &.ant-btn-primary {
                background: #1890ff;
                border-color: #1890ff;

                &:hover {
                  background: #40a9ff;
                  border-color: #40a9ff;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>